<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
     <title>
		修改商品
	</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"  />
</head>
<script src="${pageContext.request.contextPath}/js/jquery-1.6.3.js"></script>
 <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*修改按钮*/
$(".shelvesbtn").click(function(){
	var id=$(this).find("input").val();
	$("#commodity"+id).css("display","none");
	$("#commodityhidden"+id).css("display","block");
});
/*取消按钮*/
$(".cancel").click(function(){
	var id=$(this).find("input").val();
	$("#commodity"+id).css("display","block");
	$("#commodityhidden"+id).css("display","none");
});
$("#search").click(function(){
		if($("#searchcontent").val()==null||$("#searchcontent").val()==""){
			alert("请填写搜索关键字");
			return false;
		}
});
$(".confirm").click(function(){
		var id=$(this).find('input').val();
	var form=$("#myform"+id).serialize();
	var url='${pageContext.request.contextPath}/commodity/updateComm.action';
		$.post(url,form,function(data){
			if(data.result==null){
			alert("更新失败,请刷新");
			return false;
			}else{
			alert("修改成功");
			 location.reload() ;
			}
		});
});
$(".hiddenfile").change(function(){
		var cid=$(this).next().val();
		var file = $("#hiddenfile"+cid).val();
			if (!/.(gif|jpg|jpeg|png|GIF|JPG|png)$/.test(file)) {
				alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
				return false;
			}
			/* 创建表单对象 */
			var formData = new FormData();
				/* 添加文件和id */
			formData.append("img", $("#hiddenfile"+cid)[0].files[0]);
			$.ajax({
				url :"${pageContext.request.contextPath}/commodity/uploadImg.action",
				type : 'POST',
				data : formData,
				processData : false,
				contentType : false,
				dataType : "json",
				success : function(data) {
						$("#newimg"+cid).val(data.img);
						$("#notimg"+cid).attr("src","${pageContext.request.contextPath}/file/img/"+data.img);	
				},
				error : function(responseStr) { 
					console.log("error");
					} 
				});
	});
$("#pagea").click(function(){
		var page=$("#page").html();
		var pageNum=$("#pageNum").html();
		if(page==1){
		return false;
		}
		
});
$("#pagea2").click(function(){
		var page=$("#page").html();
		var pageNum=$("#pageNum").html();
		if(page==pageNum){
			return false;
		}
		
});
});
/* 改变input读写状态 */
function update(data){
		var id=$(data).next().next().next().val();
		$(".updateinput"+id).each(function(){
			$(this).attr("disabled",false);
		});
		$("#delete"+id).css("display","none");
		$(data).css("display","none");
		$("#comfirm"+id).css("display","inline");
		$("#close"+id).css("display","inline");
		return false;
}
var list;
/*取消修改*/
function closebtn(data,num){
			var id;
			if(num==1){
			var id=$(data).next().next().val();
			}else{
			var id=$(data).next().val();
			}
			var price,stock,name;
		
		for(var s=0;s<list.length;s++){
				if(list[s].id==id){
			price=list[s].price;
			stock=list[s].stock;
			name=list[s].name;
			}
		}
		$(".updateinput"+id).each(function(){
			$(this).attr("disabled",true);
			if(this.name=='name'){
				$(this).val(name);
			}else if(this.name=='price'){
				$(this).val(price);
			}else{
				$(this).val(stock);
			}
		});
		$("#updates"+id).css("display","inline");
		$("#comfirm"+id).css("display","none");
		$("#close"+id).css("display","none");
		$("#delete"+id).css("display","inline");
		return false;
}
/*提交修改*/
function submitupdate(data){
		var id=$(data).next().next().val();
		var val=$("#updateform"+id).serialize();
		var path=$("#allpath").val();
	$.post(path+"CommClassController/update.action",val,function(data){
				if(data==1){
			$(".updateinput"+id).each(function(){
			$(this).attr("disabled",true);
		});		
				$("#updates"+id).css("display","inline");
				$("#comfirm"+id).css("display","none");
				$("#close"+id).css("display","none");
				$("#delete"+id).css("display","inline");
				}else{
					closebtn(data,1);
				}
		});
		return false;
}
/* 打开和关闭修改窗口 */
function updateclass(data){
	var id=$(data).next().val();
	var path=$("#allpath").val();
	if($("#updateclassdiv"+id).css('display')=='none'){
		$(data).html('收起修改');
	$.post(path+"CommClassController/listCC.action",{'commid':id},function(result){
		list=result;
		for(var i=0;i<result.length;i++){
				var name=result[i].name;
				var price=result[i].price;
				var stock=result[i].stock;
				var classid=result[i].id;
	$("#updateclassdiv"+id).append("<form  class='updateform' id='updateform"+classid+"'><label>分类名称</label>"+
	    		"<input name='name' type='text' value='"+name+"' disabled='disabled' class='updateinput"+classid+"'>"
	    		+"<label>价格</label><input name='price' type='text' value='"+price+"' disabled='disabled' class='updateinput"+classid+"'>"
	    		+"<label>库存</label><input name='stock' type='text' value='"+stock+"' disabled='disabled' class='updateinput"+classid+"'>"
	    		+"<button onclick='return update(this)' id='updates"+classid+"'>修改</button>"
	    		+"<button style='display:none' class='comfirm' id='comfirm"+classid+"' onclick='return submitupdate(this)'>确定</button>"
	    		+"<button style='display:none' class='closes' id='close"+classid+"' onclick='return closebtn(this,2)'>取消</button>"
	    		+"<input type='hidden' value='"+classid+"' name='id'><button id='delete"+classid+"' onclick='return deletes(this,1)'>"+
	    		"删除</button></form>"
	    		);
		}
	});
	$("#updateclassdiv"+id).css("display","block");
	}else{
	$("#updateclassdiv"+id).css("display","none");
	$("#updateclassdiv"+id).find('form').each(function(){
		$(this).remove();
	});
	$(data).html('修改颜色分类');
	}
}
/*新增一行*/
var addnum=0;
function addclass(data){
		var id=$(data).next().val();
	$("#updateclassdiv"+id).append("<form  class='updateform' id='addupdateform"+addnum+"'><label>分类名称</label>"+
	    		"<input name='name' type='text' value=''  class='addupdateinput"+addnum+"'>"
	    		+"<label>价格</label><input name='price' type='text' value=''  class='addupdateinput"+addnum+"'>"
	    		+"<label>库存</label><input name='stock' type='text' value=''  class='addupdateinput"+addnum+"'>"
	    		+"<button style='display:none' onclick='return addupdate(this)' id='addupdates"+addnum+"'>修改</button>"
	    		+"<button  class='comfirm' id='addcomfirm"+addnum+"' onclick='return addcomfirm(this)'>确定</button>"
	    		+"<button  class='closes' id='addclose"+addnum+"' onclick='return addclose(this)'>取消</button>"
	    		+"<input type='hidden' value='"+addnum+"'><input name='commid' type='hidden' value='"+id+"'>"+
	    		"<input type='hidden' id='thisid"+addnum+"' > <button style='display:none' id='adddelete"+addnum+"' onclick='return deletes(this,2)'>"+
	    		"删除</button></form>"
	    		);	
	    addnum=addnum+1;
	  	 return false;
}
function addcomfirm(data){
var id=$(data).next().next().val();
	var val=$("#addupdateform"+id).serialize();
	var path=$("#allpath").val();
	$.post(path+'CommClassController/addClassload.action',val,function(datas){
			if(datas.result!=0){
			$("#addupdates"+id).css('display','inline');
			$("#addcomfirm"+id).css('display','none');
			$("#addclose"+id).css('display','none');
			$("#thisid"+id).val(datas.result);
			$("#thisid"+id).attr('name','id');
			$(".addupdateinput"+id).each(function(){
			$(this).attr("disabled",true);
			});
			$("#adddelete"+id).css("display","inline");			
			}else{
			alert("添加失败!请检查")
			return false;
			}
	});
	return false;
}
function addclose(data){
	var id=$(data).next().val();
	$("#addupdateform"+id).remove();
	return false;
}
function addupdate(data){
		var addnum=$(data).next().next().next().val();
		var id=$("#thisid"+addnum).val();
		$("#addupdates"+addnum).css('display','none');
		$("#addcomfirm"+addnum).css('display','inline');
		$("#addclose"+addnum).css('display','inline');
			$(".addupdateinput"+addnum).each(function(){
			$(this).attr("disabled",false);
		});	
		$("#addcomfirm"+addnum).attr("onclick",'return addupdateYN(this,1)');
		$("#addclose"+addnum).attr("onclick",'return addupdateYN(this,2)');
		$("#adddelete"+addnum).css("display","none");	
			return false;
}
function addupdateYN(data,num){
	
	if(num==1){
		var addnum=$(data).next().next().val();
		$(".addupdateinput"+addnum).each(function(){
			if($(this).val()==null||$(this).val()==''){
				alert("不能为空");
				return false;
			}
		});
		var path=$("#allpath").val();
		var val=$("#addupdateform"+addnum).serialize();
		$.post(path+"CommClassController/update.action",val,function(e){
				if(e==1){
			$(".addupdateinput"+addnum).each(function(){
			$(this).attr("disabled",true);
		});		
				$("#addupdates"+addnum).css('display','inline');
				$("#addcomfirm"+addnum).css('display','none');
				$("#addclose"+addnum).css('display','none');
				$("#adddelete"+addnum).css("display","inline");	
				}else{
					alert('修改失败');
				}
		});
	}else{
			var addnum=$(data).next().val();
	$("#addclose"+addnum).css('display','inline');
			$(".addupdateinput"+addnum).each(function(){
			$(this).attr("disabled",true);
				$("#addcomfirm"+addnum).css('display','none');
				$("#addclose"+addnum).css('display','none');
		});	
	$("#addupdates"+addnum).css('display','inline');
	$("#adddelete"+addnum).css("display","inline");	
	}
			return false;	
}
function deletes(data,num){
		var path=$("#allpath").val();
		var id,addnum;
		if(num==1){
			id=$(data).prev().val();
				$.post(path+"CommClassController/delete.action",{'id':id},function(result){
					if(result!=1){
						alert("删除失败.")
						return false;
					}else{
						$("#updateform"+id).remove();
					}
			});
		}else{
			id=$(data).prev().val();
			addnum=$(data).prev().prev().prev().val();
				$.post(path+"CommClassController/delete.action",{'id':id},function(result){
					if(result!=1){
						alert("删除失败.")
						return false;
					}else{
						$("#addupdateform"+addnum).remove();
					}
			});
		
		}
			return false;	
}
</script>
<body style="width: 100%;height: 100%">
    	<div style="margin-left: 70%">
    		<form action="${pageContext.request.contextPath}/commodity/searchComm.action?bs=4" method="post">
    		<input id="searchcontent" type="text" style="border:1px solid #FF7F00" placeholder="商品标题或品牌" name="search">
    		<input type="hidden" value="3" name="bs">
    		<input id="search" type="submit" value="搜索" style="background: #FF7F00;color:#fff;height: 30px;">
    		</form>
    	</div>
    	<c:if test="${commodity!=null }">
    	<c:forEach items="${commodity }" var="comm">
    	<div class="commodity" id="commodity${comm.id }" >
    		<img src="${pageContext.request.contextPath}/file/img/${comm.titleimg }" >
    		<div style="width:400px;height:100px;margin-left: 10px;margin-top:10px;float: left">
    			<span >商品名称:${comm.title }</span>
    			<br><span >商品价格:${comm.price }</span>
    			<br><span >创建时间:
    			<fmt:formatDate value="${comm.cdate }" pattern="yyyy-MM-dd HH:mm:ss"/></span>
    			<br><span >商品类型:${comm.categoryid }</span>
    		</div>
    		<div style="width:300px;height:100px;margin-left: 10px;margin-top:10px;float: left">
    			<span >商品品牌:${comm.brand }</span>
    			<br><span >商品库存:${comm.stock }</span>
    			<br><span >是否上架:
    			<c:if test="${comm.shelves==0 }">已上架</c:if>
    			<c:if test="${comm.shelves==1 }">未上架</c:if>
    			</span>
    			<br><a href="${pageContext.request.contextPath}/CommDetailedController/getDetailed.action?commid=${comm.id}" target="_blank">
    			修改商品详细页</a>
    			<br>
    			<span >商品id:${comm.id}</span>
    		</div>
    		<div class="shelvesbtn" >
    		<input type="hidden" value="${comm.id}">
    		<span style="font-size: 20px;color:#fff;">修<br><br>改</span>
    		</div>
    	</div>
    	<div class="commodityhidden" id="commodityhidden${comm.id }" >
    		<form style="margin:0;" id="myform${comm.id }" method="post">
    		<div style="position: relative;z-index: 999;">
    			<img style="border-color:#ADADAD" id="notimg${comm.id}" src="${pageContext.request.contextPath}/file/img/${comm.titleimg }" >
    			<input type="file" id="hiddenfile${comm.id }" class="hiddenfile" >
    			<input type="hidden" value="${comm.id}">
    			<input type="hidden" value="" name="titleimg" id="newimg${comm.id }" />
    		</div>
    		<div style="width:350px;height:100px;margin-left: 10px;margin-top:10px;float: left">
    			<span style="font-size: 16px;font-weight: 600">商品名称:
    			<input type="text" value="${comm.title }" name="title"/></span>
    			<br><span style="font-size: 16px;font-weight: 600">商品价格:
    			<input type="text" value="${comm.price }" name="price">
    			</span>
    			<br><span style="font-size: 16px;font-weight:600">商品类型:
    			<input type="text" value="${comm.categoryid }" name="categoryid">
    			</span>
    		</div>
    		<div style="width:300px;height:100px;margin-left: 10px;margin-top:10px;float: left">
    			<span style="font-size: 16px;font-weight: 600">商品品牌:
    			<input type="text" value="${comm.brand }" name="brand"></span>
    			<br><span style="font-size: 16px;font-weight: 600">商品库存:
    			<input type="text" value="${comm.stock }"  name="stock"/></span>
    			<br><span style="font-size: 16px;font-weight: 600">
    			详细参数:<input type="text" value="${comm.parameter}" name="parameter">
    			</span>
	    		</div>
	    		<input type="hidden" value="${comm.id}" name="id">
	    		</form>
	    		<div style="width:50px;hieght:100px;float:left;" >
	    			<button style="margin:27px 0 0 0;border:2px solid;border-radius:4px;" onclick="updateclass(this)">修改颜色分类</button>
	    			<input type="hidden" value="${comm.id}">
	    		</div>
    		<div class="shelvesbtnhidden" >
    		<input type="hidden" value="${comm.id}">
    		<span style="font-size: 20px;color:#fff;" class="confirm">确定
    		<input type="hidden" value="${comm.id}">
    		</span>
    		<span style="font-size: 20px;color:#fff;" class="cancel">取消
    		<input type="hidden" value="${comm.id}">
    		</span>
    		</div>
    	</div>
    	<div class="updateclassdiv" id="updateclassdiv${comm.id}" style="">
	    		<div style="padding:5px 0 0 20px;margin-bottom:5px;">
	    		<button style="border:2px solid;border-radius:4px;" onclick="return addclass(this)">
	    		添加分类
	    		</button>
	    		<input type="hidden" value="${comm.id}">
	    		</div>	
	    </div>
    	</c:forEach>
    	</c:if>
    	<c:if test="${commodity==null }">
    		<h3 style="margin-left: 43%">没有找到商品</h3>
    	</c:if>
    	<c:if test="${commodity!=null }">
    			   <!-- 翻页 -->
	      <div style="margin-left: 72%;margin-top: 3%" >
	      		<a id="pagea" style="color:#FF7F00" href="${pageContext.request.contextPath}/commodity/listAll.action?page=${page-1}">上一页</a>
	      		共<span id="pageNum">${pageNum }</span>页,
	      		当前第<span style="color:#FF7F00" id="page">${page+1}</span>页
	      		<a id="pagea2" style="color:#FF7F00" href="${pageContext.request.contextPath}/commodity/listAll.action?page=${page+1}">下一页</a>
	      </div>
    	</c:if>
    	<input type="hidden" value="${pageContext.request.contextPath}/" id="allpath">
 </body>
   <style>
   .commodity span{
   font-size: 15px;font-weight: 600
   }
   .updateform{
   margin: 2px 0 0 10px;
   }
   .updateform button{
   border:2px solid;border-radius:4px;margin-left:15px;
   }
.updateclassdiv{
width:950px;min-height: 120px;background: #fff;
margin:0 auto;border:1px solid #FF7F00;border-top:none;display: none;

}
   .hiddenfile{
    position: absolute;
    overflow: hidden;
    left:34px;
    top: 7px;
    height:98px;width:98px;
    opacity: 0;
   }
   #isShelves:hover{
   background: #00EEEE;cursor: pointer;height:100%;
   }
   #noShelves:hover{
   background: #00EEEE;cursor: pointer;height:100%;
   }
  .commodity{
		height: 125px;
		width:950px;
		border:1px solid #FF7F00;
		margin:0px auto;
		margin-top: 10px;
  }
  .commodity img{
  height:98px;width:98px;margin-top: 10px;margin-left: 5px;
  border: 1px solid #FF7F00;float:left;
  }
  .hiddenfile:HOVER{
  		cursor: pointer;
  }
    .commodityhidden{
		height: 125px;
		width:950px;
		border:1px solid #FF7F00;
		margin:0px auto;
		display: none;
		margin-top: 10px;
  }
  .commodityhidden img{
  height:98px;width:98px;margin-top: 10px;margin-left: 5px;
  border: 1px solid #FF7F00;float:left;
  }
 .shelvesbtn{
  width:70px;height:125px;float: left;
  background: #FF7F00;text-align: center;margin-left:55px;
  padding-top: 10px;
  }
    .shelvesbtn:HOVER{
  background: #FF0000;cursor: pointer;
  }
   .shelvesbtnhidden{
  width:70px;height:125px;float: left;
  background: #FF7F00;text-align: center;margin-left:55px;
 
  }
    .shelvesbtnhidden span{
    display: block;width:100%;height: 50%;padding-top:13px;
    }
    .shelvesbtnhidden span:HOVER{
  background: #FF0000;cursor: pointer;
  }
   </style>
</html>